<template>
    <div>
        <Card class="search" shadow>
            <Form :label-width="80" inline>
                <FormItem label="资源名称">
                    <Input v-model="listQuery.name" placeholder="请输入资源名称"/>
                </FormItem>
                <Button type="success" @click="search">搜索</Button>
            </Form>
        </Card>
        <Card shadow>
            <div class="tb-header">
                <RefreshButton :refreshList="getTableData"></RefreshButton>
                <Button type="primary" size="small" icon="md-add" style="margin-right: 5px" @click="add">新增</Button>
            </div>

            <Table row-key="id" size="small" :columns="columns" :data="tableData" border>
                <template slot-scope="{ row, index }" slot="action">
                    <Button type="primary" size="small" style="margin-right: 5px" @click="edit">编辑</Button>
                    <Button type="error" size="small" style="margin-right: 5px"  @click="del">删除</Button>
                </template>
            </Table>
        </Card>

        <Modal title="编辑" v-model="showModel" width="600px" @on-ok="submit" @on-cancel="showModel=false">
            <Form ref="formInline" :model="formData" :rules="rules" :label-width="80">
                <FormItem prop="name" label="资源名称">
                    <Input type="text" v-model="formData.name" placeholder="资源名称"/>
                </FormItem>
                <FormItem label="是否显示">
                    <i-switch size="large" v-model="formData.isShow" true-value="1" false-value="0">
                        <span slot="open">是</span>
                        <span slot="close">否</span>
                    </i-switch>
                </FormItem>
                <FormItem prop="key" label="描述">
                    <Input type="text" v-model="formData.note" placeholder="描述"/>
                </FormItem>
                <FormItem label="排序">
                    <Input type="text" v-model="formData.sort" placeholder="排序"/>
                </FormItem>
            </Form>
        </Modal>
    </div>
</template>

<script>
    import {permissionTree} from '@/api/menu';
    import RefreshButton from '../components/RefreshButton' // 分页插件
    export default {
        name: "Permission",
        components: {
            RefreshButton
        },
        data() {
            return {
                columns: [
                    {
                        title: '资源名称',
                        key: 'name',
                        width: 200,
                        tree: true
                    },
                    {
                        title: '描述',
                        key: 'note',
                        align: 'center',
                    },
                    {
                        title: '排序',
                        key: 'sort',
                        align: 'center',
                        width: 100
                    },
                    {
                        title: '是否显示',
                        key: 'isShowName',
                        width: 100,
                        align: 'center',
                    },
                    {
                        title: '操作',
                        width: 200,
                        align: 'center',
                        type: 'action',
                        slot: 'action'
                    }
                ],
                tableData: [],
                listQuery: {
                    name:""
                },
                showModel: false,
                formData: {},
                rules: {}
            }
        },
        created() {
            this.getTableData();
        },
        methods: {
            rowClick(event, data, index) {
                console.log("onRowClick", event, data, index);
                if (event === 'edit') {
                    this.edit(data)
                } else if (event === 'del') {
                    this.$layer.msg("删除成功", {icon: 1, time: 3});
                }
            },
            async getTableData() {
                this.tableData = [];
                let params = {name: this.listQuery.name}
                let res = await permissionTree(params);
                if (res.success) {
                    this.tableData = res.result;
                }
            },
            search(){
                this.getTableData()
            },
            add() {
                this.showModel = true;
                this.formData = {};
            },
            edit(row) {
                this.showModel = true;
                this.formData = row;
            },
            del() {

            },
            submit(){

            }
        }
    }
</script>

<style scoped>

</style>
